<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>即时聊天 - 社交平台</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    /* 通用样式 */
    :root {
      --primary: #4263EB;
      --primary-light: #E8F0FE;
      --secondary: #6B7280;
      --light: #F3F4F6;
      --dark: #1F2937;
      --white: #FFFFFF;
      --gray: #9CA3AF;
      --success: #10B981;
      --danger: #EF4444;
      --border: #E5E7EB;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #F0F2F5;
      color: var(--dark);
      height: 100vh;
      display: flex;
      flex-direction: column;
      margin: 0;
      overflow: hidden;
    }
    
    /* 聊天页面容器 */
    .chat-pages {
      flex: 1;
      overflow: hidden;
      position: relative;
    }
    
    .chat-page {
      display: none;
      flex-direction: column;
      height: 100%;
    }
    
    .chat-page.active {
      display: flex;
    }
    
    /* 顶部导航 */
    .chat-header {
      padding: 12px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      background-color: var(--white);
      border-bottom: 1px solid var(--border);
      position: relative;
      z-index: 10;
    }
    
    .back-btn {
      background: none;
      border: none;
      font-size: 20px;
      color: var(--dark);
      padding: 4px;
    }
    
    .contact-avatar {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      object-fit: cover;
    }
    
    .contact-info {
      flex: 1;
    }
    
    .contact-name {
      font-weight: 600;
      font-size: 16px;
      margin-bottom: 2px;
    }
    
    .contact-status {
      font-size: 12px;
      color: var(--success);
    }
    
    .header-actions {
      display: flex;
      gap: 16px;
    }
    
    .header-action {
      background: none;
      border: none;
      font-size: 20px;
      color: var(--dark);
    }
    
    /* 聊天内容区域 */
    .chat-messages {
      flex: 1;
      padding: 16px;
      overflow-y: auto;
      background-color: #F0F2F5;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    
    .message-time {
      align-self: center;
      font-size: 11px;
      color: var(--gray);
      background-color: rgba(0,0,0,0.05);
      padding: 2px 8px;
      border-radius: 4px;
      margin: 8px 0;
    }
    
    .message {
      max-width: 75%;
      display: flex;
      gap: 8px;
    }
    
    .message.received {
      align-self: flex-start;
    }
    
    .message.sent {
      align-self: flex-end;
      flex-direction: row-reverse;
    }
    
    .message-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
      margin-top: 4px;
    }
    
    .message-content {
      position: relative;
    }
    
    .message-text {
      padding: 8px 12px;
      border-radius: 18px;
      line-height: 1.4;
      font-size: 14px;
    }
    
    .message-time-indicator {
      font-size: 10px;
      color: var(--gray);
      margin-top: 4px;
      text-align: right;
    }
    
    /* 消息状态指示 */
    .message-status {
      display: inline-block;
      margin-left: 4px;
      font-size: 10px;
    }
    
    /* 输入区域 */
    .chat-input-area {
      padding: 10px 16px;
      background-color: var(--white);
      border-top: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .input-actions {
      display: flex;
      gap: 10px;
    }
    
    .input-action {
      background: none;
      border: none;
      font-size: 20px;
      color: var(--secondary);
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .message-input-container {
      flex: 1;
      position: relative;
    }
    
    .message-input {
      width: 100%;
      padding: 12px 16px;
      border-radius: 24px;
      border: 1px solid var(--border);
      background-color: var(--light);
      font-size: 14px;
      resize: none;
      height: 44px;
      overflow: hidden;
    }
    
    .message-input:focus {
      outline: none;
      border-color: var(--primary);
      background-color: white;
    }
    
    .send-btn {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background-color: var(--primary);
      color: white;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
    }
    
    /* 风格切换器 */
    .style-switcher {
      position: fixed;
      top: 10px;
      right: 10px;
      z-index: 100;
      background: white;
      border-radius: 20px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      overflow: hidden;
    }
    
    .style-btn {
      border: none;
      background: none;
      padding: 6px 12px;
      cursor: pointer;
      font-size: 12px;
    }
    
    .style-btn.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 风格1：默认蓝 */
    #style1 .received .message-text {
      background-color: var(--white);
      border: 1px solid var(--border);
      border-top-left-radius: 4px;
    }
    
    #style1 .sent .message-text {
      background-color: var(--primary);
      color: white;
      border-top-right-radius: 4px;
    }
    
    #style1 .chat-input-area {
      background-color: var(--white);
    }
    
    /* 风格2：清新绿 */
    #style2 {
      --primary: #36B37E;
      --primary-light: #E6F7F0;
    }
    
    #style2 .received .message-text {
      background-color: #F2F2F2;
      border-radius: 18px 18px 18px 0;
    }
    
    #style2 .sent .message-text {
      background-color: var(--primary);
      color: white;
      border-radius: 18px 18px 0 18px;
    }
    
    #style2 .chat-messages {
      background-color: #F9F9F9;
    }
    
    /* 风格3：深色模式 */
    #style3 {
      --primary: #5E5CE6;
      --dark: #E5E7EB;
      --white: #1F2937;
      --border: #374151;
      --light: #374151;
      --gray: #9CA3AF;
    }
    
    #style3 body,
    #style3 .chat-messages {
      background-color: #111827;
      color: var(--dark);
    }
    
    #style3 .received .message-text {
      background-color: var(--white);
      color: var(--dark);
      border-radius: 10px 10px 10px 0;
    }
    
    #style3 .sent .message-text {
      background-color: var(--primary);
      color: white;
      border-radius: 10px 10px 0 10px;
    }
    
    #style3 .message-time {
      background-color: rgba(255,255,255,0.1);
      color: var(--gray);
    }
    
    /* 风格4：气泡风格 */
    #style4 {
      --primary: #FF6B6B;
    }
    
    #style4 .chat-messages {
      background-color: #FFF5F5;
      background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ff8a8a' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }
    
    #style4 .received .message-text {
      background-color: white;
      border-radius: 20px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }
    
    #style4 .sent .message-text {
      background-color: var(--primary);
      color: white;
      border-radius: 20px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }
    
    #style4 .message {
      max-width: 80%;
    }
    
    #style4 .chat-input-area {
      background-color: white;
      border-top: none;
      box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    }
  </style>
</head>
<body>
  <!-- 风格切换器 -->
  <div class="style-switcher">
    <button class="style-btn active" data-style="style1">风格1</button>
    <button class="style-btn" data-style="style2">风格2</button>
    <button class="style-btn" data-style="style3">风格3</button>
    <button class="style-btn" data-style="style4">风格4</button>
  </div>
  
  <!-- 聊天页面容器 -->
  <div class="chat-pages">
    <!-- 风格1：默认蓝 -->
    <div id="style1" class="chat-page active">
      <!-- 顶部导航 -->
      <div class="chat-header">
        <button class="back-btn">
          <i class="fa fa-arrow-left"></i>
        </button>
        <img src="https://picsum.photos/100/100?random=1" alt="联系人头像" class="contact-avatar">
        <div class="contact-info">
          <div class="contact-name">张小明</div>
          <div class="contact-status"><i class="fa fa-circle"></i> 正在输入...</div>
        </div>
        <div class="header-actions">
          <button class="header-action">
            <i class="fa fa-phone"></i>
          </button>
          <button class="header-action">
            <i class="fa fa-info-circle"></i>
          </button>
        </div>
      </div>
      
      <!-- 聊天内容 -->
      <div class="chat-messages">
        <div class="message-time">今天 14:30</div>
        
        <div class="message received">
          <img src="https://picsum.photos/100/100?random=1" alt="对方头像" class="message-avatar">
          <div class="message-content">
            <div class="message-text">你好，我看到你发布的设计任务，很感兴趣</div>
            <div class="message-time-indicator">14:32</div>
          </div>
        </div>
        
        <div class="message sent">
          <img src="https://picsum.photos/100/100?random=20" alt="我的头像" class="message-avatar">
          <div class="message-content">
            <div class="message-text">你好！很高兴你感兴趣，请问有相关作品可以参考吗？</div>
            <div class="message-time-indicator">14:33 <span class="message-status"><i class="fa fa-check"></i></span></div>
          </div>
        </div>
        
        <div class="message received">
          <img src="https://picsum.photos/100/100?random=1" alt="对方头像" class="message-avatar">
          <div class="message-content">
            <div class="message-text">有的，我做过几个类似的VI设计，我可以发一些案例给你看看</div>
            <div class="message-time-indicator">14:35</div>
          </div>
        </div>
        
        <div class="message received">
          <img src="https://picsum.photos/100/100?random=1" alt="对方头像" class="message-avatar">
          <div class="message-content">
            <div class="message-text">这是我之前为科技公司做的Logo设计，你看看是否符合你的风格要求</div>
            <div class="message-time-indicator">14:36</div>
          </div>
        </div>
        
        <div class="message sent">
          <img src="https://picsum.photos/100/100?random=20" alt="我的头像" class="message-avatar">
          <div class="message-content">
            <div class="message-text">风格很符合我们的需求！你能大概说一下设计周期和费用吗？</div>
            <div class="message-time-indicator">14:38 <span class="message-status"><i class="fa fa-check-circle"></i></span></div>
          </div>
        </div>
      </div>
      
      <!-- 输入区域 -->
      <div class="chat-input-area">
        <div class="input-actions">
          <button class="input-action">
            <i class="fa fa-smile-o"></i>
          </button>
          <button class="input-action">
            <i class="fa fa-paperclip"></i>
          </button>
          <button class="input-action">
            <i class="fa fa-picture-o"></i>
          </button>
        </div>
        <div class="message-input-container">
          <textarea class="message-input" placeholder="输入消息..."></textarea>
        </div>
        <button class="send-btn">
          <i class="fa fa-paper-plane"></i>
        </button>
      </div>
    </div>
    
    <!-- 风格2：清新绿 -->
    <div id="style2" class="chat-page">
      <!-- 与风格1结构相同，样式由CSS控制 -->
      <div class="chat-header">
        <button class="back-btn">
          <i class="fa fa-arrow-left"></i>
        </button>
        <img src="https://picsum.photos/100/100?random=2" alt="联系人头像" class="contact-avatar">
        <div class="contact-info">
          <div class="contact-name">创意工作室</div>
          <div class="contact-status"><i class="fa fa-circle"></i> 在线</div>
        </div>
        <div class="header-actions">
          <button class="header-action">
            <i class="fa fa-phone"></i>
          </button>
          <button class="header-action">
            <i class="fa fa-info-circle"></i>
          </button>
        </div>
      </div>
      
      <div class="chat-messages">
        <div class="message-time">昨天 09:45</div>
        
        <div class="message received">
          <img src="https://picsum.photos/100/100?random=2" alt="对方头像" class="message-avatar">
          <div class="message-content">
            <div class="message-text">关于你发布的小程序开发任务，我们可以承接</div>
            <div class="message-time-indicator">09:45</div>
          </div>
        </div>
        
        <div class="message sent">
          <img src="https://picsum.photos/100/100?random=20" alt="我的头像" class="message-avatar">
          <div class="message-content">
            <div class="message-text">请问你们有相关的开发经验吗？大概需要多久能完成？</div>
            <div class="message-time-indicator">09:47 <span class="message-status"><i class="fa fa-check-circle"></i></span></div>
          </div>
        </div>
        
        <div class="message received">
          <img src="https://picsum.photos/100/100?random=2" alt="对方头像" class="message-avatar">
          <div class="message-content">
            <div class="message-text">我们做过3个类似的外卖小程序，经验丰富。根据你的需求，大概需要30天左右</div>
            <div class="message-time-indicator">09:50</div>
          </div>
        </div>
        
        <div class="message-time">今天 10:15</div>
        
        <div class="message sent">
          <img src="https://picsum.photos/100/100?random=20" alt="我的头像" class="message-avatar">
          <div class="message-content">
            <div class="message-text">价格方面可以再优惠一些吗？我们的预算有限</div>
            <div class="message-time-indicator">10:15 <span class="message-status"><i class="fa fa-check"></i></span></div>
          </div>
        </div>
        
        <div class="message received">
          <img src="https://picsum.photos/100/100?random=2" alt="对方头像" class="message-avatar">
          <div class="message-content">
            <div class="message-text">可以的，我们最多能优惠到8000元，包含后期3个月的维护</div>
            <div class="message-time-indicator">10:18</div>
          </div>
        </div>
      </div>
      
      <div class="chat-input-area">
        <div class="input-actions">
          <button class="input-action">
            <i class="fa fa-smile-o"></i>
          </button>
          <button class="input-action">
            <i class="fa fa-paperclip"></i>
          </button>
          <button class="input-action">
            <i class="fa fa-picture-o"></i>
          </button>
        </div>
        <div class="message-input-container">
          <textarea class="message-input" placeholder="输入消息..."></textarea>
        </div>
        <button class="send-btn">
          <i class="fa fa-paper-plane"></i>
        </button>
      </div>
    </div>
    
    <!-- 风格3：深色模式 -->
    <div id="style3" class="chat-page">
      <div class="chat-header">
        <button class="back-btn">
          <i class="fa fa-arrow-left"></i>
        </button>
        <img src="https://picsum.photos/100/100?random=3" alt="联系人头像" class="contact-avatar">
        <div class="contact-info">
          <div class="contact-name">视觉设计师</div>
          <div class="contact-status"><i class="fa fa-circle"></i> 离线 - 2小时前</div>
        </div>
        <div class="header-actions">
          <button class="header-action">
            <i class="fa fa-phone"></i>
          </button>
          <button class="header-action">
            <i class="fa fa-info-circle"></i>
          </button>
        </div>
      </div>
      
      <div class="chat-messages">
        <div class="message-time">3月12日</div>
        
        <div class="message received">
          <img src="https://picsum.photos/100/100?random=3" alt="对方头像" class="message-avatar">
          <div class="message-content">
            <div class="message-text">我已经完成了初稿设计，你看看是否符合要求</div>
            <div class="message-time-indicator">15:30</div>
          </div>
        </div>
        
        <div class="message sent">
          <img src="https://picsum.photos/100/100?random=20" alt="我的头像" class="message-avatar">
          <div class="message-content">
            <div class="message-text">整体风格不错，但Logo的颜色能不能调整一下？我希望更偏向科技蓝</div>
            <div class="message-time-indicator">16:45 <span class="message-status"><i class="fa fa-check-circle"></i></span></div>
          </div>
        </div>
        
        <div class="message received">
          <img src="https://picsum.photos/100/100?random=3" alt="对方头像" class="message-avatar">
          <div class="message-content">
            <div class="message-text">没问题，我调整后再发给你。另外，名片设计需要包含哪些信息？</div>
            <div class="message-time-indicator">17:10</div>
          </div>
        </div>
        
        <div class="message sent">
          <img src="https://picsum.photos/100/100?random=20" alt="我的头像" class="message-avatar">
          <div class="message-content">
            <div class="message-text">需要包含公司名称、姓名、职位、电话、邮箱和地址，我稍后把具体信息发给你</div>
            <div class="message-time-indicator">17:15 <span class="message-status"><i class="fa fa-check-circle"></i></span></div>
          </div>
        </div>
      </div>
      
      <div class="chat-input-area">
        <div class="input-actions">
          <button class="input-action">
            <i class="fa fa-smile-o"></i>
          </button>
          <button class="input-action">
            <i class="fa fa-paperclip"></i>
          </button>
          <button class="input-action">
            <i class="fa fa-picture-o"></i>
          </button>
        </div>
        <div class="message-input-container">
          <textarea class="message-input" placeholder="输入消息..."></textarea>
        </div>
        <button class="send-btn">
          <i class="fa fa-paper-plane"></i>
        </button>
      </div>
    </div>
    
    <!-- 风格4：气泡风格 -->
    <div id="style4" class="chat-page">
      <div class="chat-header">
        <button class="back-btn">
          <i class="fa fa-arrow-left"></i>
        </button>
        <img src="https://picsum.photos/100/100?random=4" alt="联系人头像" class="contact-avatar">
        <div class="contact-info">
          <div class="contact-name">视频制作团队</div>
          <div class="contact-status"><i class="fa fa-circle"></i> 在线</div>
        </div>
        <div class="header-actions">
          <button class="header-action">
            <i class="fa fa-phone"></i>
          </button>
          <button class="header-action">
            <i class="fa fa-info-circle"></i>
          </button>
        </div>
      </div>
      
      <div class="chat-messages">
        <div class="message-time">今天 08:12</div>
        
        <div class="message sent">
          <img src="https://picsum.photos/100/100?random=20" alt="我的头像" class="message-avatar">
          <div class="message-content">
            <div class="message-text">你好，关于产品宣传视频的制作，我想了解一下具体流程</div>
            <div class="message-time-indicator">08:12 <span class="message-status"><i class="fa fa-check-circle"></i></span></div>
          </div>
        </div>
        
        <div class="message received">
          <img src="https://picsum.photos/100/100?random=4" alt="对方头像" class="message-avatar">
          <div class="message-content">
            <div class="message-text">您好！我们的流程是：需求沟通 → 脚本创作 → 拍摄/素材收集 → 剪辑制作 → 修改完善 → 最终交付</div>
            <div class="message-time-indicator">08:15</div>
          </div>
        </div>
        
        <div class="message received">
          <img src="https://picsum.photos/100/100?random=4" alt="对方头像" class="message-avatar">
          <div class="message-content">
            <div class="message-text">根据您的需求，大概需要7天时间完成，我们可以先出脚本给您确认</div>
            <div class="message-time-indicator">08:16</div>
          </div>
        </div>
        
        <div class="message sent">
          <img src="https://picsum.photos/100/100?random=20" alt="我的头像" class="message-avatar">
          <div class="message-content">
            <div class="message-text">好的，那我们能先确认一下拍摄风格吗？我希望能参考苹果的宣传视频风格</div>
            <div class="message-time-indicator">08:18 <span class="message-status"><i class="fa fa-check"></i></span></div>
          </div>
        </div>
        
        <div class="message received">
          <img src="https://picsum.photos/100/100?random=4" alt="对方头像" class="message-avatar">
          <div class="message-content">
            <div class="message-text">没问题，我们很熟悉苹果的风格，简洁、科技感强。我们会按照这个方向来制作</div>
            <div class="message-time-indicator">08:20</div>
          </div>
        </div>
      </div>
      
      <div class="chat-input-area">
        <div class="input-actions">
          <button class="input-action">
            <i class="fa fa-smile-o"></i>
          </button>
          <button class="input-action">
            <i class="fa fa-paperclip"></i>
          </button>
          <button class="input-action">
            <i class="fa fa-picture-o"></i>
          </button>
        </div>
        <div class="message-input-container">
          <textarea class="message-input" placeholder="输入消息..."></textarea>
        </div>
        <button class="send-btn">
          <i class="fa fa-paper-plane"></i>
        </button>
      </div>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 风格切换功能
    document.querySelectorAll('.style-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        // 更新按钮状态
        document.querySelectorAll('.style-btn').forEach(b => b.classList.remove('active'));
        this.classList.add('active');
        
        // 显示对应的聊天页面
        const styleId = this.getAttribute('data-style');
        document.querySelectorAll('.chat-page').forEach(page => {
          page.classList.remove('active');
        });
        document.getElementById(styleId).classList.add('active');
      });
    });
    
    // 消息输入框自动调整高度
    document.querySelectorAll('.message-input').forEach(input => {
      input.addEventListener('input', function() {
        this.style.height = 'auto';
        // 限制最大高度
        if (this.scrollHeight > 120) {
          this.style.height = '120px';
          this.style.overflowY = 'auto';
        } else {
          this.style.height = this.scrollHeight + 'px';
          this.style.overflowY = 'hidden';
        }
      });
    });
    
    // 发送消息功能
    document.querySelectorAll('.send-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        const chatPage = this.closest('.chat-page');
        const input = chatPage.querySelector('.message-input');
        const messageText = input.value.trim();
        
        if (messageText) {
          sendMessage(chatPage, messageText);
          input.value = '';
          input.style.height = '44px';
        }
      });
    });
    
    // 回车发送消息
    document.querySelectorAll('.message-input').forEach(input => {
      input.addEventListener('keypress', function(e) {
        if (e.key === 'Enter' && !e.shiftKey) {
          e.preventDefault();
          const chatPage = this.closest('.chat-page');
          const messageText = this.value.trim();
          
          if (messageText) {
            sendMessage(chatPage, messageText);
            this.value = '';
            this.style.height = '44px';
          }
        }
      });
    });
    
    // 发送消息函数
    function sendMessage(chatPage, text) {
      const messagesContainer = chatPage.querySelector('.chat-messages');
      const now = new Date();
      const hours = now.getHours().toString().padStart(2, '0');
      const minutes = now.getMinutes().toString().padStart(2, '0');
      const timeString = `${hours}:${minutes}`;
      
      // 创建新消息元素
      const messageHTML = `
        <div class="message sent">
          <img src="https://picsum.photos/100/100?random=20" alt="我的头像" class="message-avatar">
          <div class="message-content">
            <div class="message-text">${text}</div>
            <div class="message-time-indicator">${timeString} <span class="message-status"><i class="fa fa-check"></i></span></div>
          </div>
        </div>
      `;
      
      // 添加到消息容器
      messagesContainer.insertAdjacentHTML('beforeend', messageHTML);
      
      // 滚动到底部
      messagesContainer.scrollTop = messagesContainer.scrollHeight;
      
      // 模拟已读状态
      setTimeout(() => {
        const lastStatus = messagesContainer.querySelector('.message.sent:last-child .message-status i');
        if (lastStatus) {
          lastStatus.className = 'fa fa-check-circle';
        }
      }, 1000);
      
      // 模拟回复
      if (Math.random() > 0.3) { // 30%概率不回复
        setTimeout(() => {
          const replies = [
            "好的，我明白了",
            "没问题，我会处理的",
            "这个需求我需要再确认一下",
            "可以的，我们稍后联系",
            "我会尽快回复你"
          ];
          const randomReply = replies[Math.floor(Math.random() * replies.length)];
          
          const replyHTML = `
            <div class="message received">
              <img src="${chatPage.querySelector('.contact-avatar').src}" alt="对方头像" class="message-avatar">
              <div class="message-content">
                <div class="message-text">${randomReply}</div>
                <div class="message-time-indicator">${timeString}</div>
              </div>
            </div>
          `;
          
          messagesContainer.insertAdjacentHTML('beforeend', replyHTML);
          messagesContainer.scrollTop = messagesContainer.scrollHeight;
          
          // 更新正在输入状态
          chatPage.querySelector('.contact-status').innerHTML = '<i class="fa fa-circle"></i> 在线';
        }, 2000 + Math.random() * 3000);
      }
    }
    
    // 输入时显示"正在输入"
    document.querySelectorAll('.message-input').forEach(input => {
      let typingTimeout;
      
      input.addEventListener('input', function() {
        const chatPage = this.closest('.chat-page');
        const statusElem = chatPage.querySelector('.contact-status');
        
        // 显示正在输入
        statusElem.innerHTML = '<i class="fa fa-circle"></i> 正在输入...';
        
        // 清除之前的超时
        clearTimeout(typingTimeout);
        
        // 设置超时，3秒后恢复在线状态
        typingTimeout = setTimeout(() => {
          statusElem.innerHTML = '<i class="fa fa-circle"></i> 在线';
        }, 3000);
      });
    });
    
    // 返回按钮
    document.querySelectorAll('.back-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        alert('返回聊天列表');
      });
    });
    
    // 头部操作按钮
    document.querySelectorAll('.header-action').forEach(btn => {
      btn.addEventListener('click', function() {
        if (this.querySelector('.fa-phone')) {
          alert('发起语音通话');
        } else if (this.querySelector('.fa-info-circle')) {
          alert('查看联系人信息');
        }
      });
    });
    
    // 输入区域操作按钮
    document.querySelectorAll('.input-action').forEach(btn => {
      btn.addEventListener('click', function() {
        if (this.querySelector('.fa-smile-o')) {
          alert('打开表情选择器');
        } else if (this.querySelector('.fa-paperclip')) {
          alert('选择文件');
        } else if (this.querySelector('.fa-picture-o')) {
          alert('选择图片');
        }
      });
    });
  </script>
</body>
</html>
